"use client";

import { MainContext } from "@/src/providers/MainProvider";
import { Tab, TabList, Tabs } from "@chakra-ui/react";
import { useContext } from "react";

function Aside() {
  const { setCurrentTab } = useContext(MainContext);

  const onChangeTab = (index: number) => {
    const tabs = ["home", "mouse", "pointer", "macro", "setting"];
    setCurrentTab(tabs[index]);
  };
  return (
    <div className="tabs">
      <Tabs onChange={onChangeTab} defaultIndex={0} variant={"unstyled"}>
        <TabList className="tablist">
          <Tab>
            <svg
              className="w-8"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="25981"
              width="48"
              height="48"
            >
              <path d="M896 853.333333a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V404.906667a42.666667 42.666667 0 0 1 16.469333-33.706667l341.333334-265.472a42.666667 42.666667 0 0 1 52.394666 0l341.333334 265.472a42.666667 42.666667 0 0 1 16.469333 33.706667V853.333333z m-85.333333-42.666666V425.728l-298.666667-232.277333-298.666667 232.277333V810.666667h597.333334zM298.666667 640h426.666666v85.333333H298.666667v-85.333333z"></path>
            </svg>
          </Tab>
          <Tab>
            <svg
              className="w-8"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="26303"
              width="48"
              height="48"
            >
              <path d="M475.349333 170.666667c-67.498667 0-101.845333 7.210667-133.461333 24.106666a147.328 147.328 0 0 0-61.781333 61.781334C263.210667 288.128 256 322.517333 256 389.973333v243.968c0 67.498667 7.210667 101.845333 24.106667 133.461334 14.378667 26.88 34.901333 47.402667 61.781333 61.781333 31.573333 16.896 65.962667 24.106667 133.461333 24.106667h73.301334c67.498667 0 101.845333-7.210667 133.461333-24.106667a147.328 147.328 0 0 0 61.781333-61.781333c16.896-31.573333 24.106667-65.962667 24.106667-133.461334V389.973333c0-67.498667-7.210667-101.845333-24.106667-133.461333a147.328 147.328 0 0 0-61.781333-61.781333C650.538667 177.877333 616.149333 170.666667 548.693333 170.666667h-73.386666z m0-85.333334h73.301334c85.930667 0 132.010667 11.861333 173.738666 34.176a232.618667 232.618667 0 0 1 96.768 96.768c22.314667 41.728 34.176 87.808 34.176 173.738667v243.968c0 85.930667-11.861333 132.010667-34.176 173.738667a232.618667 232.618667 0 0 1-96.768 96.768c-41.728 22.314667-87.808 34.176-173.738666 34.176H475.306667c-85.930667 0-132.010667-11.861333-173.738667-34.176A232.618667 232.618667 0 0 1 204.8 807.722667c-22.272-41.728-34.133333-87.808-34.133333-173.738667V389.973333c0-85.930667 11.861333-132.010667 34.176-173.738666A232.618667 232.618667 0 0 1 301.653333 119.509333C343.338667 97.194667 389.418667 85.333333 475.349333 85.333333zM469.333333 256h85.333334v213.333333h-85.333334V256z"></path>
            </svg>
          </Tab>
          <Tab>
            <svg
              className="w-8"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="27207"
              width="48"
              height="48"
            >
              <path
                d="M768 469.333333V341.333333l170.666667 170.666667-170.666667 170.666667v-128h-213.333333v213.333333h128l-170.666667 170.666667-170.666667-170.666667h128v-213.333333H256v128l-170.666667-170.666667 170.666667-170.666667v128h213.333333V256H341.333333l170.666667-170.666667 170.666667 170.666667h-128v213.333333z"
                p-id="27208"
              ></path>
            </svg>
          </Tab>
          <Tab>
            <svg
              className="w-8"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="27537"
              width="48"
              height="48"
            >
              <path
                d="M896 768v128h-85.333333v-128h-85.333334v-85.333333h256v85.333333h-85.333333zM213.333333 768v128H128v-128H42.666667v-85.333333h256v85.333333H213.333333z m256-512V128h85.333334v128h85.333333v85.333333H384V256h85.333333z m0 170.666667h85.333334v469.333333h-85.333334V426.666667z m-341.333333 170.666666V128h85.333333v469.333333H128z m682.666667 0V128h85.333333v469.333333h-85.333333z"
                p-id="27538"
              ></path>
            </svg>
          </Tab>
        </TabList>
      </Tabs>
    </div>
  );
}

export default Aside;
